<template>
  <div>
        <div class="header">
            <div class="head_back" @click="$router.back()">
                <i class="iconfont iconjiantou2"></i>
                <span class="iconfont iconnew"></span>
            </div>
           <div class="follow_btn" :class="detail.has_follow ? 'active':''" @click="followHandle">
                {{detail.has_follow ? '已关注':'关注'}}
            </div>
        </div>
         
      <!-- <h1>文章还有视频详情页</h1>
      接收到的参数：{{$route.params.id}}
       -->
       <div v-if="detail.type===1" class="news" hidden>
        <!-- <h1>渲染新闻详情页面</h1> -->
        <h1 class="title">{{detail.title}}</h1>
        <div class="author">
            <div class="author_name">{{detail.user.nickname}}</div>
            <div class="author_date">{{detail.user.create_date.slice(0,10)}}</div>
        </div>
        <div class="content" v-html="detail.content">
        </div>
        <div class="btn_group">
            <div class="btn_like" :class="detail.has_like ? 'active' : ''" @click="postLikeHandle">
                <i class="iconfont icondianzan">
                </i>
                <span>{{detail.like_length}}</span>
            </div>
            <div class="btn_weixin">
                <i class="iconfont iconweixin">
                </i>
                <span>微信</span>
            </div>
        </div>
       </div>

       <div v-else-if="detail.type===2" class="video">
           <!-- <h1>渲染视频详情页面</h1> -->
           <!-- <video :src="detail.content"></video> -->
           <video class="video_main" controls :poster="detail.cover[0].url" src="https://video.pearvideo.com/mp4/adshort/20201231/cont-1714376-15555367_adpkg-ad_hd.mp4"></video>
             <div class="author">
            <div class="author_info">
              <img v-if="detail.user.head_img" :src="$baseURL+detail.user.head_img" alt="" class="author_avator">
              <img v-else src="../images/75d28f97ly1fvuzkfr3h5j22c02c07wk.jpg" alt="" class="author_avator">
              <span class="author_name">{{ detail.user.nickname }}</span>
            </div>
              <div class="follow_btn" :class="detail.has_follow ? 'active':''" @click="followHandle">
                {{detail.has_follow ? '已关注':'关注'}}
            </div>
        </div>
              <h1 class="video_title">{{ detail.title }}</h1>
       </div>
       <div class="comment" >
          <h2 class="comment_title" >精彩跟帖</h2>
          <div v-if="commentList.length>0" class="comment_list">
             <CommentMain v-for="item in commentList" :key="item.id" :commentData='item'/>
             <span class="comment_more" @click="$router.push(`/comment/${detailId}`)">更多跟帖</span>
          </div>
          <div v-else class="comment_empty">
            暂无评论，抢沙发🐾
          </div>
       </div>
        <CommentSend :detailId='detailId' @updataComment='getPostCommentData'/>
           <van-dialog
      v-model="loginShow"
      title="亲，你没有登录"
      cancel-button-text="残忍拒绝"
      confirm-button-text="去登录"
      show-cancel-button
      @confirm='goToLogin'
    >
    </van-dialog>
  </div>
</template>

<script>
import { getPostById ,removeUserFollowsById,updatePostLikeById,addUserFollowsById, getPostCommentById} from '@/api' 
import { getToken } from '@/untails/mytoken'
import CommentMain from '@/components/myframe/Main.vue'
import CommentSend from '@/components/myframe/send.vue'
export default {
  components:{
    CommentMain,
    CommentSend
  },
   data () {
       return {
           detail:{},
           detailId:0,
           isLogin:false,
           loginShow:false,
           commentList:[]
       }
   },
   mounted(){
       const { id }=this.$route.params
       this.detailId =id
      //  console.log(id);
       this.isLogin=getToken() ? true:false
       getPostById(id).then((res)=>{
          //  console.log(res);
           this.detail=res.data.data
       })
      this.getPostCommentData()
    
   },
   methods:{
     //  获取评论列表
     getPostCommentData(){
         getPostCommentById(this.detailId ).then((res)=>{
        console.log('getPostCommentById',res.data);
        this.commentList=res.data.data.slice(0,3)
      })
     },
      postLikeHandle() {
      // 1.0 获取是否已经登录
      // 2.0 未登录 - 弹出提示框 - 提示继续看看，还是去登录页登录
      // 3.0 已经登录 - 正常点赞
      // 发送请求是用于后端更新数据库的数据
      // if(this.isLogin===false){
      //     this.loginShow=true
      //     return
      // }
      updatePostLikeById(this.detailId).then((res) => {
        const { message } = res.data;
        console.log("点赞按钮被点击了", message);
        // 还需要再更新前端的视图
        if (message === "点赞成功") {
          this.detail.like_length += 1;
          this.detail.has_like = true;
        } else if (message === "取消成功") {
          this.detail.like_length -= 1;
          this.detail.has_like = false;
        }
      });
    },
    goToLogin(){
        this.$router.push({
            name:'login',
            params: { target: this.$route.path },
        })
    },
    followHandle(){
        // console.log(11);
         if(this.isLogin===false){
          this.loginShow=true
          return
      }
     const userId=this.detail.user.id
     if(this.detail.has_follow===true){
       removeUserFollowsById(userId).then((res)=>{
          //  console.log(res.data);
           this.$toast(res.data.message);
           this.detail.has_follow = false;
       })
     }
     else{
       addUserFollowsById(userId).then((res)=>{
         this.$toast(res.data.message);
         this.detail.has_follow = true;
       })
     }
    }
   }
}
</script>
<style lang="less" scoped>
.comment {
  padding-bottom: 120px;
  background-color: #f8fcff;
  .comment_title {
  font-size: 16px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  }

  .comment_list {
    padding-bottom: 50px;
      .comment_more {
         width: 120px;
         height: 30px;
         border: 1px solid #ccc;
         border-radius: 15px;
         display: flex;
         justify-content: center;
         align-items: center;
         margin: 20px auto 0;
         font-size: 13px;
      }
  }

  .comment_empty {
     font-size: 13px;
     height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
}
.video {
.video_title {
     font-size: 16px;
     padding: 0 15px;
     font-weight: normal;
  }
  .video_main {
       width: 100%;
       max-height: 500px;
  }

  .author {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    .author_info {
      display: flex;
      align-content: center;
      .author_avator {
        width: 25px;
        height: 25px;
        object-fit: cover;
        border: 1px solid #ddd;
        border-radius: 50%;

      }

      .author_name {
          margin-left: 5px;
          font-size: 13px;
          color: #666;
      }
    }

  }

  
}
.btn_group {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 50px;
  .btn_like,
  .btn_weixin {
   width: 80px;
   height: 30px;
   border: 1px solid #ddd;
   border-radius: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
  }
  .btn_like.active{
      color:#ff7a00 ;
      border-color: #ff7a00;
  }
  .iconfont{
      margin-right: 3px;
  }
    .iconweixin {
color: #00c800;
    }
}
.follow_btn {
    width: 62px;
    height: 26px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:red;
    border: 1px solid red;
    font-size: 12px;
    color: #fff;
    &.active{
        background-color: transparent;
        border-color: #ddd;
        color: #333;
    }
  }
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    border-bottom: 1px solid #ccc;
    padding: 0 15px;
  .head_back {
      display: flex;
      align-items: center;
    .iconjiantou2 {
       font-size: 20px;
    }

    .iconnew {
      font-size: 45px;
    }
  }
}
 .news {
    padding: 10px;
  .title {
          font-size: 18px;
  }

  .author {
      margin: 5px 0;
      font-size: 12px;
      color: #999;
    .author_name {
           margin-left: 10px;
    }
  }


}
 /deep/ .content {
     .photo{
         span{
             display: flex;
             justify-content: center;
             color: #666;
             font-size: 12px;
             margin: 3px 0;
         }
     }
   img{
       width: 100%;
   }
   p{
       text-indent: 2em;
       margin: 10px 0;
       line-height: 1.5;
   }
  }

</style>